<template>
	<view class="content">
		<view class="text-area">
			<text class="title">{{ title }}</text>
		</view>
		<view class="tea"><image src="../../../static/image/home/greenTea_bgc.jpg" mode="" style="width: 100%;"></image></view>
		<!-- 主页面板块 -->
		<view class="tea-mu">
			<searchinput></searchinput>
			<!-- <image src="../../../static/image/home/scan_code.png" mode="" style="width: 56rpx; height: 56rpx;" class="weisearch"></image> -->
			<!-- 8图连接 -->
			<view class="NavBox marginBottom-Theme">
				<shortcutNav
					style="padding: 0upx 20upx 20upx 20upx;"
					:list="shortcutNavList_two"
					:hengNumber="4"
					:boxshadow="false"
					:borderRadius="false"
					@toDetailPage="toDetailPage"
				></shortcutNav>
			</view>
			<!-- 轮播图 -->
			<view style="margin-top: 50px;"><carousel :img-list="imgList" class="lunbo" url-key="url" @selected="selectedBanner" /></view>
			<!-- 选项卡 -->
			<view class="page" style="margin-top: 0px; background-color: #eee;">
				<tabControl :current="current" :values="items" bgc="#fff" :scrollFlag="true" :isEqually="true" @clickItem="onClickItem"></tabControl>
				<!-- 使用 swiper 配合 滑动切换 -->
				<swiper class="swiper" style="height: 100%;" @change="scollSwiper" :current="current">
					<swiper-item v-for="(item, index) in items" :key="index">
						<!-- 使用 scroll-view 来滚动内容区域 -->
						<!-- <scroll-view scroll-y="true" style="height: 100%;">{{ item }}</scroll-view> -->
						<view>{{ test }}</view>
						<!-- 全部茶叶商城 -->
						<view v-if="current == 0" style="margin-top: 20rpx;">
							<waterfallsFlow :list="list">
								<!--  #ifdef  MP-WEIXIN -->
								<!-- 微信小程序自定义内容 -->
								<view v-for="(item, index) of list" :key="index" slot="slot{{index}}">
									<view class="cnt">
										<view class="title">{{ item.title }}</view>
										<view class="text">{{ item.text }}</view>
										<view class="price-style">
											￥{{ item.price }}
											<button>去购买>></button>
										</view>
									</view>
								</view>
								<!--  #endif -->

								<!-- #ifndef  H5 -->
								<!-- app、h5 自定义内容 -->
								<!-- <template v-slot:default="item">
										<view class="cnt">
											<view class="title">{{ item.title }}</view>
											<view class="text">{{ item.text }}</view>
											<view class="price-style">￥：{item.price}}< <button>去购买>></button>/view>

										</view>
								    </template> -->
								<!-- #endif -->
							</waterfallsFlow>
						</view>
						<!-- 商城结束 -->

						<!-- 普洱生茶叶商城 -->
						<view v-if="current == 1" style="margin-top: 20rpx;">
							<waterfallsFlow :list="raw_tea">
								<!--  #ifdef  MP-WEIXIN -->
								<!-- 微信小程序自定义内容 -->
								<view v-for="(item, index) of raw_tea" :key="index" slot="slot{{index}}">
									<view class="cnt">
										<view class="title">{{ item.title }}</view>
										<view class="text">{{ item.text }}</view>
										<view class="price-style">
											￥{{ item.price }}
											<button>去购买>></button>
										</view>
									</view>
								</view>
								<!--  #endif -->

								<!-- #ifndef  H5 -->
								<!-- app、h5 自定义内容 -->
								<!-- <template v-slot="{item}">
								        <view class="cnt">
								          <view class="title">{{ item.title }}</view>
								          <view class="text">{{ item.text }}</view>
													<view class="price-style">￥：{item.price}}</v <button去购买>>></button>iew>
		
								        </view>
								      </template> -->
								<!-- #endif -->
							</waterfallsFlow>
						</view>
						<!-- 普洱生结束 -->

						<!-- 普洱熟茶叶商城 -->
						<view v-if="current == 2" style="margin-top: 20rpx;">
							<waterfallsFlow :list="ripe_tea">
								<!--  #ifdef  MP-WEIXIN -->
								<!-- 微信小程序自定义内容 -->
								<view v-for="(item, index) of ripe_tea" :key="index" slot="slot{{index}}">
									<view class="cnt">
										<view class="title">{{ item.title }}</view>
										<view class="text">{{ item.text }}</view>
										<view class="price-style">
											￥{{ item.price }}
											<button>去购买>></button>
										</view>
									</view>
								</view>
								<!--  #endif -->

								<!-- #ifndef  H5 -->
								<!-- app、h5 自定义内容 -->
								<!-- <template v-slot="{list:item}">
								        <view class="cnt">
								          <view class="title">{{ item.title }}</view>
								          <view class="text">{{ item.text }}</view>
													<view class="price-style">￥：{item.price}}</v <button去购买>>></button>iew>
		
								        </view>
								      </template> -->
								<!-- #endif -->
							</waterfallsFlow>
						</view>
						<!-- 普洱熟结束 -->
					</swiper-item>
				</swiper>
			</view>
		</view>
	</view>
</template>

<script>
import shortcutNav from '@/components/ay-shortcutNav/shortcutNav.vue';
import carousel from '@/components/vear-carousel/vear-carousel.vue';
import tabControl from '@/components/tabControl-tag/tabControl-tag.vue';
import waterfallsFlow from '@/components/maramlee-waterfalls-flow/maramlee-waterfalls-flow.vue';
import searchinput from '@/components/searchinput/searchinput.vue'

import { list,raw_tea, ripe_tea,shortcutNavList_two} from './productList.js';
export default {
	components: {
		shortcutNav,
		carousel,
		tabControl,
		waterfallsFlow,
		searchinput
	},
	data() {
		return {
			navbackgroundColor: '#fff',
			themeColor: '#33CCCC',
			// 八图连接
			shortcutNavList_two: shortcutNavList_two,
			// 生茶
			raw_tea: raw_tea,
			// 熟茶
			ripe_tea: ripe_tea,
			// 轮播
			imgList: [
				{
					url:
						'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn%2Fw640h510%2F20180205%2F1e07-fyrhcqy5841027.jpg&refer=http%3A%2F%2Fn.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1627732579&t=e4766b23f97706f5a8722bea5fa58000',
					id: 1
				},
				{
					url: 'http://img.mp.itc.cn/upload/20170401/57ef921bfbbf49fcbebe92c11814ba56_th.jpeg',
					id: 2
				},
				{
					url:
						'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.lovehhy.net%2Flib%2Fimg%2F2026306%2F600711_1312098490.jpg&refer=http%3A%2F%2Fwww.lovehhy.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1627732808&t=b31e007bd83db99e0c0a5eae967f6b38',
					id: 3
				},
				{
					url:
						'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fs15.sinaimg.cn%2Fmw690%2F002n67H0gy6Rksi6TP82e%26690&refer=http%3A%2F%2Fs15.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1627732893&t=bb05dfd58e8452a9da9c442e82929ac7',
					id: 4
				}
			],
			items: ['全部', '普洱生茶', '普洱熟茶'],
			current: 0,
			test: '',

			// 商城数据
			list: list,

			value: '',
			title: ''
		};
	},
	onLoad() {
		let that = this;
	},
	methods: {
		toDetailPage(e) {
			// let list = e.list;
			// let idx = e.curIndex;
			// let list_img = [];
			// list.forEach(item => {
			//     list_img.push(item.img)
			// })
			// if (list_img && list_img.length > 0) {
			//     uni.previewImage({
			//         current: list_img[idx],
			//         // 传 Number H5端出现不兼容
			//         urls: list_img,
			//         indicator: "number",
			//         loop: true,
			//     });
			// }
			console.log(e);
			console.log('点击了图片');
		},

		selectedBanner(item, index) {
			console.log('🥒', item, index);
		},

		onClickItem(val) {
			this.current = val.currentIndex;
			console.log(this.current);

			if (this.current == 0) {
				this.test = '';
			}
			if (this.current == 1) {
				this.test = '';
			}
			if (this.current == 2) {
				this.test = '';
			}
		},
		scollSwiper(e) {
			this.current = e.target.current;
		}
	}
};
</script>

<style lang="scss">
* {
	margin: 0;
	padding: 0;
}
.tea {
	width: 100%;
	height: 400rpx;
}
.tea-mu {
	width: 100%;
	height: 5000rpx;
	background-color: #ffffff;
	position: relative;
	border-radius: 50rpx;
}
.search {
	top: 40rpx;
	left: 40rpx;
}
.weisearch {
	float: right;
	top: -24rpx;
	right: 28rpx;
}
.NavBox {
	width: 94%;
	margin: 0upx 20upx;
}
.marginBottom-Theme {
	margin-bottom: 20upx;
	box-shadow: 2rpx 10rpx 25rpx rgba($color: #a8a8a8, $alpha: 1);
	border-radius: 50rpx;
	position: absolute;
	top: 165rpx;
}
.lunbo {
	position: relative;
	top: 380rpx;
}
page {
	height: 100%;
}
.page {
	height: 100%;
	position: relative;
	top: 360rpx;
}

.cnt {
	padding: 20rpx;
	.title {
		font-size: 32rpx;
		font-weight: bold;
		white-space: nowrap;
		text-overflow:ellipsis;
		text-overflow: ellipsis;
		overflow:hidden;
	}
	.text {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		font-size: 28rpx;
		margin-top: 10rpx;
		line-height: 40rpx;
	}
}
.price-style {
	// margin: 10rpx;
	color: red;
	font-size: 40rpx;
	button {
		width: 180rpx;
		margin: 0;
		height: 80rpx;
		font-size: 28rpx;
		background-color: red;
		color: #ffffff;
		font-weight: bold;
		padding: 0;
	}
	
}
</style>
